<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-bind</title>
	</head>
	<style type="text/css">
		.spanclass {
			color: #777777;
		}
		.redcolor {
			color: red;
		}
		.fontSize {
			font-size: 12px;
		}
		.green {
			color: green;
		}
	</style>
	<body>
		<div id="app">
			<h3>v-bind 绑定</h3><hr />
			<h4>1、绑定标签的属性</h4>
			<p><img :src="imgsrc" width="80px"/></p>
			<h4>2、绑定样式css</h4>
			<span :class="spanclass">简单的样式绑定</span><hr />
			<h4>3、绑定样式数组</h4>
			<span :class="[red,fontSize]">数组绑定</span><hr />
			<h4>4、绑定Class的判断</h4>
			<span :class="{green:isTrue}">绑定Class的判断</span><hr />
			<h4>5、绑定Class的三元运算符</h4>
			<span :class="selected?green:redcolor">绑定Class的三元运算符</span>
			<input type="checkbox" name="one" id="one" value="真" v-model="selected"/>
			<label for="one">selected={{selected}}</label><hr />
			<!--<input type="radio" name="one" id="two" value="假" v-model="selected"/><label for="two">假</label>-->
			<h4>6、绑定Style对象</h4>
			<span :style="styleObject">绑定Class的判断</span><hr />
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					imgsrc: 'https://cn.vuejs.org/images/logo.png',
					spanclass: 'spanclass',
					red: 'redcolor',
					fontSize: 'fontSize',
					green: 'green',
					redcolor: 'redcolor',
					isTrue: true,
					selected: true,
					styleObject: {
						color: 'blue',
						fontSize: '20px',
						fontWeight: '600'
					}
					
				}
			})
		</script>
	</body>
</html>
